An adjustable (black) Meter chart

This Meter chart has been customised - the start and end angles have been adjusted as well as the radius of the black part in the center increased. Before drawing, the canvas is cleared to black. And the Meter is adjustable by way of some custom code that utilises the grow effect.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.meter.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="500" style="background-color: black; border-radius: 15px; box-shadow:3px 3px 3px gray">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var meter = new RGraph.Meter({
            id: 'cvs',
            min: 0,
            max: 100,
            value: 75,
            options: {
                backgroundColor: 'black',
                anglesStart: RGraph.PI - 0.55,
                anglesEnd: RGraph.TWOPI + 0.5,
                centery: 300,
                textSize: 22,
                textColor: 'white',
                textValign: 'bottom',
                greenColor: '#0a0',
                segmentRadiusStart: 175,
                border: 0,
                tickmarksSmallNum: 0,
                tickmarksBigNum: 0,
                needleRadius: 250,
                needleColor: '#ddd',
                centerpinStroke: 'black',
                centerpinFill: '#ddd',
                textAccessible: false
            }
        }).on('beforedraw', function (obj)
        {
            RGraph.clear(obj.canvas, 'black');
        }).draw()

        meter.canvas.onclick = function (e)
        {
            var newvalue = meter.getValue(e);
            
            meter.value = newvalue;
            meter.grow();
        }
    };
</script>